<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #000;
            text-align: center;
        }
        .clock{
            position: absolute;
            top: 100px;
            left: 400px;
            box-sizing: border-box;
            box-sizing: -webkit-border-box;
            position: relative;
            width: 400px;
            height: 400px;
            border: 3px solid red;
            border-radius: 50%;
            background: url(./img/5.jpg) no-repeat;
            background-size: contain;
            background-position: center;
            box-shadow: 5px 5px 10px  grey,-5px -5px 10px grey,5px -5px 10px grey,-5px 5px 10px grey;
        }
        span{
            position: absolute;
            left: 597px;
            top: 104px;
            display: inline-block;
            width:6px;
            height: 10px;
            list-style: none;
            background-color:#fff;
            transform-origin:3px 196px ;
        }
        span:nth-child(1){
            height: 15px;
            background-color: red;
        }
        .yuan{
            position: absolute;
            left: 595px;
            top: 295px;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
        }
        
        .hour{
            position: absolute;
            left: 2px;
            bottom: 5px;
            width: 6px;
            height: 100px;
            background: linear-gradient(red,green);
            transform-origin: bottom;

        }
        .min{
            position: absolute;
            left: 3px;
            bottom: 5px;
            width: 4px;
            height: 150px;
            background: linear-gradient(green,blue);
            transform-origin: bottom;
        }
        .sec{
            position: absolute;
            left: 4px;
            bottom: 5px;
            width: 2px;
            height: 180px;
            background: linear-gradient(blue,yellow);
            transform-origin: bottom;
        }
        .time{
            position: absolute;
            left: 50%;
            bottom: 100px;
            transform: translateX(-50px);
            width: 100px;
            height: 40px;
            background-color: #fff;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: black;
            text-shadow: 0 -2px 3px red;
        }
        .center{
            width: 50px;
            height: 100%;
            background-color: #454545;
        }
        .addClass{
          background: bottom ,linear-gradient(rgb(106, 16, 224), rgb(9, 233, 46));
          animation:in 1s; 
        }
        @keyframes in{
            0%{ transform:rotateY(0)}
            50%{transform:rotateY(180deg)}
            100%{transform:rotateY(360deg)}
        }
        @keyframes zh{

        }
        .life{
            position: absolute;
            top:30px;
            left: 350px;
            width: 500px;
            height: 50px;
            line-height: 50px;
            font-family: '楷体';
            font-size: 30px;
            text-align: center;
            text-shadow: 0 -3px 5px rgb(196, 85, 85);
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
            -webkit-background-clip:text; 
            -webkit-text-fill-color:transparent; 
        }
        .life:hover{
           transition: 4s;
           transform: rotateY(360deg);
           transform-origin: center;
           /* transform-style: preserve-3d; */
        }
        .rq{
            position: absolute;
            top: 100px;
            right: 100px;
            background-color: #fff;
            width: 50px;
            height: 30px;
            line-height: 30px;
            font-size: 15px;
            text-align: center;
        }
        .line{
            display: inline-block;
            height: 30px;
            border-right: 1px solid black;
        }
        .mon{
            width: 24px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            float: left;
        }
        .dat{
            width: 24px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            float: right;
        }
        .search{
            position: absolute;
            right: 100px;
            top: 30px;
            width: 200px;
            text-align: right;

        }
        .sword{
            margin-top: 5px;
            display: block;
            width: 100%;
            height: 30px;
            font:  16px/30px skyblue;
        }

        .ul li{
            list-style: none;
            background-color: rgba(58, 197, 86, 0.5);
        }
        .ul li:hover{
            background-color: yellowGreen;
        }
        .ul li a{
            display: inline-block;
            width: 100%;
            text-decoration: none;
            text-align: left;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .news{
            position: absolute;
            top: 50%;
            right: 100px;
            width: 500px;
            height: 500px;
        }
        /* .book{
            position: absolute;
            left: 100px;
            top: 100px;
            width: 200px;
            height: 200px;
            background-color: #fff;
        }
        .btop{
            position: absolute;
            top: 10px;
            left: 50px;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            transform: skew(-15deg);
        }
        .bright{
            position: absolute;
            top: 110px;
            left: 137px;
            height: 6px;
            width: 100px;
            transform:rotate(-75deg) skew(-75deg);
            transform-origin: left top;
            border: 1px solid red;
        }
        .bfant{
            position: absolute;
            top: 110px;
            left: 35px;
            width: 100px;
            height: 22px;
            border: 1px solid blue;
            border-top-right-radius: -20%;
        } */
        .book2{
            position: absolute;
            left: 150px;
            top: 100px;
            width: 200px;
            height: 200px;
            /* background-color: #fff; */
            perspective: 2000px;
            perspective-origin: -100px -1000px ;
        }
        .ye{
          position: absolute;
          right: 10px;
          top: 10px;
          width: 150px;
          height: 150px;
          transform-style: preserve-3d;
          border: 1px solid #fff;
          /* backface-visibility: hidden; */
          transform-origin: left;
          background-color:  rgba(181, 221, 183,0.5);
          z-index: 12;
          font-size: 14px;
        }
        .ye:nth-of-type(1){
            padding: 30px 40px 20px 40px;
            text-align: center;
            font-size: 40px;
            font-weight: 900;
            animation: fans 10s 1s linear  forwards;
        } 
        .ye:nth-of-type(2){ 
            padding-top:5px ;
            animation: fans 10s 2s linear  infinite;
        } 
        .ye:nth-of-type(3){ 
            padding-top:15px ;
            animation: fans 10s 3s linear  infinite;
        } 
        .ye:nth-of-type(4){ 
            padding-top:25px ;
            animation: fans 10s 4s linear  infinite;
        } 
        .ye:nth-of-type(5){ 
            padding-top:35px ;
            animation: fans 10s 5s linear  infinite;
        } 
        .ye:nth-of-type(6){ 
            padding-top:45px ;
            animation: fans 10s 6s linear  infinite;
        } 
        .ye:nth-of-type(7){ 
            padding-top:55px ;
            animation: fans 10s 7s linear  infinite;
        } 
        .ye:nth-of-type(8){ 
            padding-top:65px ;
            animation: fans 10s 8s linear  infinite;
        } 
        .ye:nth-of-type(9){ 
            padding-top:75px ;
            animation: fans 10s 9s linear  infinite;
        }
        .ye:nth-of-type(10){
            padding-top:85px ;
            animation: fans 10s 10s linear  infinite;
        }
        .ye:nth-of-type(11){
            padding-top:95px ;
            animation: fans 10s 11s linear  infinite;
        }
        .ye:nth-of-type(12){
            z-index: 1;
            padding: 30px 40px 20px 40px;
            text-align: center;
            font-size: 40px;
            font-weight: 900;
        }
        @keyframes fans{
            0%{
                transform: rotateY(0deg) ;
            }
            20%{
                transform: rotateY(-36deg) ;
            }
            40%{
                transform: rotateY(-72deg) ;
            }
            60%{
                transform: rotateY(-108deg) ;
            }
            80%{
                transform: rotateY(-144deg) ;
            }
            100%{
                transform: rotateY(-180deg) ;
            }
        }
        .detail{
            position: absolute;
            top: 360px;
            left: 30px;
            width: 320px;
            padding: 0;
        }
        .show{
            /* background-color: #fff; */
            width: 320px;
            height: 40px;
        }
        .word{
            display: block;
            position: absolute;
            top: 40px;
            left: 0;
            width: 320px;

        }
        .word li{
            display: block;
            font:  16px/40px '楷体';
            list-style:none;
            width: 320px;
            height: 40px;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="life">这一生敬畏人生 无意来回愿美好</div>
    <div class="clock">
        <div class="rq">
            <div class="mon"></div>
            <div class="line"></div>
            <div class="dat"></div>
        </div>
        <div class="time">
    </div>
    </div>
    <div class="fa">
      <span class="ke"></span>
    </div>
    <div class="yuan">
    <div class="hour"></div>
    <div class="min"></div>
    <div class="sec"></div>
    </div>
    <div class="addClass"></div>
    <div class="search">
        <input type="text" class="sword" placeholder="众里寻他千百度">
        <ul class="ul"></ul>
    </div>
    <div class="news">
        <!-- <iframe src="https://tv.cctv.com/live/cctv5/" frameborder="0" width='100%' height="80%" id="myifr"></iframe> -->
    </div>
    <!-- <div class="book">
        <div class="btop fan">书面</div>
        <div class="btop fan">书面</div>
        <div class="btop fan">书面</div>
        <div class="btop fan">书面</div>
        <div class="bright"></div>
        <div class="bfant"></div>
    </div> -->

    <div class="book2">
        <div class="ye">生活</div>
        <div class="ye">本以为青春是殊途同归</br>谁知它是后会无期</div>
        <div class="ye">腹有诗书气自华</br>最是书香能致远</div>
        <div class="ye">闲看庭前花开花落</br>漫随天外云卷云舒</div>
        <div class="ye">历经繁华方知平凡是真</br>回首沧桑只想平淡如水</div>
        <div class="ye">时间磨去了年少轻狂</br>沉淀了冷暖自知</div>
        <div class="ye">表情里透出进来心境</br>眉间藏有过往岁月</div>
        <div class="ye">强颜欢笑定妆容</br>寂清无人返归真</div>
        <div class="ye">红尘陌上独自行走</br>无言沉默独熬苦痛</div>
        <div class="ye">命里有时终须有</br>命里无时莫强求</div>
        <div class="ye">离去的都是风景</br>留下的才是人生</div>
        <div class="ye">人生</div>
    </div>
    <div class="detail">
        <div class="show"></div>
        <ul class="word"></ul>
    </div>
    <!-- <div>
        看不透的人心，放不下的牵挂，走不完的坎坷，越不过的无奈，忘不了的昨天，忙不忘的今天，想不到的明天，最后不知道消失在哪一天，这就是人生
    </div> -->
    <script>
        //创建同名回调函数解决跨域
        function download(data){
            let sul=get('.ul')
            sul.innerHTML=''
            for(var i=0;i<data.s.length;i++){
                let sli=document.createElement('li')
                let sa=document.createElement('a')
                sa.innerText=data.s[i]
                sa.href=`http://wwww.baidu.com/s?wd=${data.s[i]}`
                sa.target='_blank'
                sli.appendChild(sa)
                sul.appendChild(sli)
            }
        }
    </script>
    <script>
        function get(some){
            return document.querySelector(some)
        }
        let clock=get('.clock')
        let ul=get('.ulke')
        let ke =get('.ke')
        let mon=get('.mon')
        let dat=get('.dat')
        let hour=get('.hour')
        let min=get('.min')
        let sec=get('.sec')
        let body=get('body')
        let time=get('.time')
        let fa=get('.fa')
        let yuan=get('.yuan')
        let bgcImg=['url(./img/1.jpg)','url(./img/2.jpg)','url(./img/3.jpg)','url(./img/5.jpg)','url(./img/6.jpg)']
        for(var i=1;i<60;i++){
            let newli=document.createElement('span')
            let x=i*6+'deg'
            if(i%5===0){
                newli.style.height='15px'
                newli.style.backgroundColor='red'
            }
            newli.style.transform=`rotate(${x})`
            fa.appendChild(newli)
        }
        setInterval(()=>{
            let date=new Date()
            let h=date.getHours()
            let m=date.getMinutes()
            let s=date.getSeconds()
            let month=date.getMonth()+1
            let dateT=date.getDate()
            let index=Math.round(Math.random()*6)
            if(s==0){
                clock.style.backgroundImage=bgcImg[index]
            }
            let hdeg=h*30+'deg'
            let mdeg=m*6+'deg'
            let sdeg=s*6+'deg'
            let hh=h<10?'0'+h:h
            let mm=m<10?'0'+m:m
            let ss=s<10?'0'+s:s
            let nowTime=`${hh}:${mm}:${ss}`

            fa.children[s].classList.add("addClass")
            setTimeout(()=>{
                fa.children[s].classList.remove("addClass");
            },1000)
            hour.style.transform=`rotate(${hdeg})`
            min.style.transform=`rotate(${mdeg})`
            sec.style.transform=`rotate(${sdeg})`
            time.innerHTML=nowTime
            mon.innerHTML=month
            dat.innerHTML=dateT
        },1000)


        //设置搜索框
        let sword=get('.sword')
        let sul=get('.ul')
        sword.addEventListener('keyup',(e)=>{
            let en=e||window.event
            if(sword.value){
                //创建script标签 并设置回调函数 download 连接跨域
                let script=document.createElement('script')
                 script.src=`http://suggestion.baidu.com/su?wd=${sword.value}&cb=download`
                document.body.append(script)
            }else{
              sul.innerHTML=''
            }
        })
        //回车搜索
            document.body.addEventListener('keyup',  function(e){
                let en=e||window.event
                if(sword.value&&en.keyCode===13){
                   window.open(`http://wwww.baidu.com/s?wd=${sword.value}`)
                }
            })
        let book=get('.book')
        let fan=get('.fan')

        let word=get('.word')
        for(var i=1;i<=10;i++){
            let wli=document.createElement('li')
            let ye=document.querySelectorAll('.ye')
            wli.innerHTML=ye[i].textContent
            word.appendChild(wli)
        }
        let times=0

        let lifeTime=setInterval(()=>{
            let wordOffsetTop=word.offsetTop
            word.style.top=word.offsetTop-40+'px'
            word.style.color='black'
            for(var i=0;i<10;i++){
                word.children[i].style.color='rgba(10,0,0,0)'
            }
            if(times==10){
                word.style.top=0+'px'
                times=0
            }
            word.children[times].style.color='white'
            times++

        },2000)
        // book.onmouseenter=function(){
        //    with(fan.style){
        //     backgroundColor= 'red'
        //     transformOrigin=' -14px';
        //     transformStyle= 'preserve-3d';
        //     transition='5s';
        //     transform=' rotateY(90deg) ';
        //    }
        // }
        // book.onmouseleave=function(){
        //    with(fan.style){
        //     backgroundColor= 'blue'
        //     transformOrigin=' 0';
        //     transformStyle= 'preserve-3d';
        //     transition='5s';
        //     transform=' rotateY(-90deg) ';
        //    }
        // }
    </script>
</body>
</html>